@charset 'utf-8';
@import 'rest';
@import 'header';
@import 'footer';

@mixin center{
	margin:{
		left: auto;
		right: auto;
	}
}

@mixin flex-1{
	display: flex;
	justify-content: center;
}

@mixin WH{
	width: 80%;
	height: 80%;
}

@mixin flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
	
}

main{
	width: 100%;
	height: 560px;
	overflow: hidden;
	background-color: #f3f3f3;
	.user-info{
		width: 70%;
		height: 500px;
		margin-top: 30px;
		margin-bottom: 30px;
		@include center;
		@include flex-1;
		.HGT{
			height: 35px;
		}
		.m-top{
			margin-top: 15px;
		}
		input{
			outline: none;
			padding-left: 10px;
			border: 1px solid #cccccc;
		}
		
		.register-box, .login-box{
			width: 40%;
			background-color: white;
			margin-right: 5px;
			@include flex-center;
		};
		
		.register-form, .login-form{
			@include WH;
		};
		
		.register-form, .login-form{
			display: flex;
			flex-direction: column;
			align-items: center;
			p{
				color: #757575;
			}
			#register-btn{
				width: 100%;
				background-color: black;
				color: white;
				text-align: center;
				line-height: 100%;
			}
		};
		
		.login-form{
			input{
				width: 100%;
			}
		};
		
		.remember{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			#left{
				display: flex;
				.checkbox-btn{
					width: 15px;
					height: 15px;
					margin-right: 5px;
				}
			}
		};
		
		.login-btn{
			color: white;
			background-color: black;
			text-align: center;
			line-height: 100%;
		}
	}
}

